<template>
  <div>
    <n-card>
      <n-grid :x-gap="12">

        <n-grid-item :span="12">

            <n-space>
              <n-button style="margin-bottom: 2px;" type="primary" @click="saveNotice">保存通知</n-button>
            </n-space>
            <MdEditor v-model="notice" style="height: 700px;" :theme="darkTheme?'dark':'light'" />


        </n-grid-item>
        <n-grid-item :span="12">
          <n-space>
            <n-button style="margin-bottom: 2px;" type="primary" @click="saveNotice">保存历史</n-button>
          </n-space>
          <MdEditor v-model="history" style="height: 700px;" :theme="darkTheme?'dark':'light'" />
        </n-grid-item>

        <n-grid-item :span="24">
          <n-card style="margin-top: 5px">
            <n-space>
              <n-button style="margin-bottom: 2px;" type="primary" @click="saveNotice">保存历史</n-button>
            </n-space>
            <n-input type="textarea" v-model:value="updateConfig">
            </n-input>
          </n-card>
        </n-grid-item>
      </n-grid>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import {storeToRefs} from "pinia"
import {useSystemStore} from "@/store/modules/useSystemStore"
import {MdEditor} from "md-editor-v3";
import 'md-editor-v3/lib/style.css';
import {onMounted, ref} from "vue";
import {sysParamController} from "@/api/controller/sysParamController";
const {
  clientHeight,
  layoutHeaderHeight,
  darkTheme,
  tabsHeight
} = storeToRefs(useSystemStore());

const notice = ref('')
const history = ref('')
const updateConfig = ref('')

onMounted(()=>{
  getNoticeAndHistory()
})

const getNoticeAndHistory = async ()=>{
  sysParamController.getNoticeAndHistory().then(res=>{
    if (res.code == 200) {
      notice.value = res.data.notice
      history.value = res.data.history
      updateConfig.value = res.data.updateConfig;
    }
  })
}

const saveNotice = async ()=>{
  sysParamController.saveNotice({notice: notice.value, history: history.value,updateConfig: updateConfig.value}).then(res=>{
    if (res.code == 200) {
      getNoticeAndHistory()
    }
  })
}


</script>
